/* Smartphones (portrait and landscape) ----------- */
@media
only screen and (max-width : 480px) and (orientation : portrait),
only screen and (max-height: 480px) and (orientation : landscape),
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead tr {
    display:none;
  }

  tr { border: 1px solid #ccc; }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  /*
  Label the data
  */
  td:nth-of-type(1):before { content: ""; }
  td:nth-of-type(2):before { content: "Size"; }
  td:nth-of-type(3):before { content: ""; }
  td:nth-of-type(4):before { content: "Down Rate"; }
  td:nth-of-type(5):before { content: "Up Rate"; }
  td:nth-of-type(6):before { content: "ETA"; }
  td:nth-of-type(7):before { content: "Peers"; }
  td:nth-of-type(8):before { content: "Status"; }
  td:nth-of-type(9):before { content: "Remove"; }

  .tab-title {
    display:none;
  }

  .tab-image {
    display: inline-block;
  }
}

/* iPhone 4 ----------- */
@media {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
